<template>
    <div>
        <!--（融资）-评审会记录:rzPshjl-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox rzAppsh">
            <div class="formArrow d_f a_i_c">
                <img src="../../assets/formArrow.png" alt="">
                <span>评委意见</span>
            </div>
            <div class="d_f a_i_c j_c_s_a m_t_10">
                <div class="d_f a_i_c">
                    <img src="../../assets/formsSuccess.png" alt="">
                    <span class="vote m_l_5">赞成票</span>
                    <span class="num m_l_10">{{ success }}</span>
                </div>
                <div class="d_f a_i_c">
                    <img src="../../assets/formError.png" alt="">
                    <span class="vote m_l_5">反对票</span>
                    <span class="num m_l_10">{{ error }}</span>
                </div>
                <div class="d_f a_i_c">
                    <img src="../../assets/talk.png" alt="" class="talk">
                    <span class="vote m_l_5">再议票</span>
                    <span class="num m_l_10">{{ padding }}</span>
                </div>
            </div>
            <div class="d_f a_i_c j_c_s_b m_t_20">
                <div style="width: 2%;"></div>
                <div style="width: 15%;" class="label">评审姓名</div>
                <div style="width: 15%;" class="label">结论</div>
                <div style="width: 30%;" class="size">或有风险提示</div>
                <div style="width: 30%;" class="size">初复审回复</div>
                <div style="width: 26px;"></div>
            </div>
            <div v-for="(item, index) in model.record.record" class="d_f rzPshjl m_t_20 a_i_c j_c_s_b">
                <div style="width: 2%;">{{ index + 1 }}</div>
                <div style="width: 15%;">
                    <el-select v-model="item.empId" :disabled="isAudit" placeholder="请选择评审姓名"
                        @change="selectChange(item.empId, index)">
                        <el-option v-for="item in options.empId" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <div style="width: 15%;">
                    <el-select v-model="item.vote" :disabled="isAudit" placeholder="请选择结论" @change="getTotal">
                        <el-option v-for="item in options.vote" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div style="width: 30%;">
                    <el-input @mouseleave="closeTips" @mouseenter="openTips(item.hint)" :disabled="isAudit"
                        v-model="item.hint" placeholder="请输入风险提示" />
                </div>
                <div style="width: 30%;">
                    <el-input @mouseleave="closeTips" @mouseenter="openTips(item.reviewReply)" :disabled="isAudit"
                        v-model="item.reviewReply" placeholder="请输入初复审回复" />
                </div>
                <div style="width: 26px;" class="d_f a_i_c">
                    <img src="../../assets/reduce.png" alt="" @click="reduce(index)" class="reduce"
                        v-if="index > 0 && !isAudit">
                </div>
            </div>
            <div class="d_f a_i_c j_c_s_b m_t_20">
                <div style="width: 2%;"></div>
                <div style="width: 15%;"></div>
                <div style="width: 15%;"></div>
                <div style="width: 30%;"></div>
                <div style="width: 30%;"></div>
                <div style="width: 26px;" @click="add" v-if="!isAudit">
                    <img src="../../assets/add.png" alt="" class="reduce">
                </div>
            </div>

            <div class="segment" v-if="fields.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields.length > 0">
                <myform :fields="fields" :model="model.record" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
        <el-tooltip v-model:visible="visible" :content="content" placement="bottom" trigger="click" virtual-triggering
            :virtual-ref="triggerRef" />
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref, onMounted, onUnmounted, } from 'vue'
import { rzPshjlType } from './data'
import { CloseBold } from '@element-plus/icons-vue'
import { copy } from '../../utils/date'
import { useRouter } from 'vue-router'
import { Message } from '../../utils/resetMessage'
import { formGet, unitFormSet, emplLstAll } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
const model = {
   
    record:{
        record: [
        {
            empId: '',//评审人员ID
            empName: '',//评审姓名
            vote: '',//投票结果： 0-反对，1-赞成，2-再议 
            hint: '',//风险提示
            reviewReply: '',//初复审回复
        }
    ],
    },
}
export default defineComponent({
    name: '',
    components: {
        CloseBold
    },
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}
        },
        isAudit: {
            type: Boolean,
            default: true
        }
    },
    setup(props: any) {
        const data: rzPshjlType = reactive({
            name: '评审会记录',
            status: true,
            model: copy(model),
            subTitle: '',
            fields: [],
            options: {
                vote: [
                    {
                        label: '赞成',
                        value: '1'
                    },
                    {
                        label: '反对',
                        value: '0'
                    },
                    {
                        label: '再议',
                        value: '2'
                    },
                ],
                empId: [],
            },
            success: 0,
            padding: 0,
            error: 0,
            id: '',
            isReset: 2,
            visible: false,
            content: '',
        })
        const router = useRouter()
        onBeforeMount(() => {
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
        })
        onMounted(() => {
            document.addEventListener('mousemove', mousemoveHandler)
        })

        onUnmounted(() => {
            document.removeEventListener('mousemove', mousemoveHandler)
        })
        const triggerRef = ref({
            getBoundingClientRect() {
                return position.value
            },
        })
        const position = ref({
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
        })

        const mousemoveHandler = (e) => {
            position.value = DOMRect.fromRect({
                width: 0,
                height: 0,
                x: e.clientX,
                y: e.clientY,
            })
        }
        const methods = {
            getData() {
                formGet({ tag: 'rzPshjl' }).then((res: any) => {
                    data.id = res.id
                    data.name = res.name
                    data.isReset = res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item:any)=>{
                        data.model.record[item.prop]=''
                    })
                    data.fields = formStruct.formFields
                    data.fields.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                        if (localData.record) {
                            for (let key in data.model.record) {
                            if(localData.record[key]!=null){
                                data.model.record[key] = localData.record[key]
                            }
                        }
                            data.model.record.record = localData.record.record||[]
                        }
                        data.model.record.record.map((item:any)=>{
                            if(item.vote!=null){
                                item.vote=String(item.vote)
                            }
                        })
                    }
                    methods.getTotal()
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
                emplLstAll({}).then((res: any) => {
                    data.options.empId = res
                })
            },
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            add() {
                data.model.record.record.push(
                    {
                        empId: '',//评审人员ID
                        empName: '',//评审姓名
                        vote: '',//投票结果： 0-反对，1-赞成，2-再议 
                        hint: '',//风险提示
                        reviewReply: '',//初复审回复
                    }
                )
            },
            reduce(index: number) {
                data.model.record.record.splice(index, 1)
                methods.getTotal()
            },
            selectChange(id: number | string, index: number) {
                data.options.empId.map((item: any) => {
                    if (item.id == id) {
                        data.model.record.record[index].empName = item.name
                    }
                })
            },
            getTotal() {
                let a = data.model.record.record.filter((item: any) => item.vote === '1')
                let b = data.model.record.record.filter((item: any) => item.vote === '0')
                let c = data.model.record.record.filter((item: any) => item.vote === '2')
                data.success = a.length > 0 ? a.length : 0
                data.error = b.length > 0 ? b.length : 0
                data.padding = c.length > 0 ? c.length : 0
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
                data.success = data.error = data.padding = 0
            },
            resultData() {
                return new Promise((resolve, reject) => {
                    if(data.model.record.record.length==0)return  Message({ type: 'error', message: '请填写评审会记录' })
                    if (data.model.record.record.some((item: any) => !item.empId)) {
                        reject(false)
                        Message({ type: 'error', message: '请选择评审人员' })
                        return
                    }
                    if (data.model.record.record.some((item: any) => !item.vote)) {
                        reject(false)
                        Message({ type: 'error', message: '请选择投票结果' })
                        return
                    }
                    resolve(data.model)
                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
            openTips(value: any) {
                if (!value) return
                data.content = value
                data.visible = true
                // console.log(item,value);
            },
            closeTips() {
                data.content = ''
                data.visible = false
            }
        }
        return {
            ...toRefs(data),
            ...methods, triggerRef
        }
    }
})
</script>
<style scoped lang='scss'>
.vote {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}

.num {
    color: rgba(0, 0, 0, 0.9);
    font-size: 36px;
    font-weight: 700;
}

.talk {
    width: 22px;
    height: 22px;
}

.reduce {
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.label {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}

.label::before {
    color: var(--el-color-danger);
    content: "*";
    margin-right: 4px;
}

.size {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}
</style>
<style lang="scss">
.rzPshjl {

    .el-select,
    .el-input {
        width: calc(100% - 20px) !important;
    }
}
</style>